<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-600 to-red-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">意见反馈</h1>
                <button onclick="viewMyFeedbacks()" class="text-white hover:opacity-80">
                    <i class="fas fa-history text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Feedback Header Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-orange-600 to-red-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-comment-alt text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">您的声音很重要</h3>
                        <p class="text-sm opacity-90 mt-1">帮助我们改进产品和服务</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">已反馈</p>
                        <p class="text-lg font-semibold">12条</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-32">
            <!-- Feedback Type Selection -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    反馈类型
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div onclick="selectFeedbackType('bug')" class="feedback-type bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:border-red-300 transition-all">
                        <i class="fas fa-bug text-2xl text-red-600 mb-2"></i>
                        <p class="text-sm font-medium">Bug报告</p>
                        <p class="text-xs text-gray-500 mt-1">系统错误、异常</p>
                    </div>
                    <div onclick="selectFeedbackType('feature')" class="feedback-type bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:border-blue-300 transition-all">
                        <i class="fas fa-lightbulb text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">功能建议</p>
                        <p class="text-xs text-gray-500 mt-1">新功能、改进</p>
                    </div>
                    <div onclick="selectFeedbackType('experience')" class="feedback-type bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:border-green-300 transition-all">
                        <i class="fas fa-heart text-2xl text-green-600 mb-2"></i>
                        <p class="text-sm font-medium">使用体验</p>
                        <p class="text-xs text-gray-500 mt-1">界面、流程优化</p>
                    </div>
                    <div onclick="selectFeedbackType('other')" class="feedback-type bg-white rounded-lg border border-gray-200 p-3 text-center cursor-pointer hover:border-purple-300 transition-all">
                        <i class="fas fa-comment-dots text-2xl text-purple-600 mb-2"></i>
                        <p class="text-sm font-medium">其他建议</p>
                        <p class="text-xs text-gray-500 mt-1">服务、政策等</p>
                    </div>
                </div>
            </div>

            <!-- Feedback Form -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    详细信息
                </h3>
                <div class="space-y-4">
                    <!-- Title -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <label class="block text-sm font-medium text-gray-700 mb-2">标题</label>
                        <input type="text" id="feedback-title" placeholder="请简要描述问题或建议" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none">
                    </div>

                    <!-- Priority -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <label class="block text-sm font-medium text-gray-700 mb-2">优先级</label>
                        <div class="flex space-x-2">
                            <button onclick="selectPriority('low')" class="priority-btn flex-1 py-2 px-3 bg-gray-100 text-gray-700 rounded-lg text-sm transition-colors">
                                <i class="fas fa-arrow-down mr-1"></i>低
                            </button>
                            <button onclick="selectPriority('medium')" class="priority-btn flex-1 py-2 px-3 bg-yellow-100 text-yellow-700 rounded-lg text-sm transition-colors">
                                <i class="fas fa-minus mr-1"></i>中
                            </button>
                            <button onclick="selectPriority('high')" class="priority-btn flex-1 py-2 px-3 bg-gray-100 text-gray-700 rounded-lg text-sm transition-colors">
                                <i class="fas fa-arrow-up mr-1"></i>高
                            </button>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <label class="block text-sm font-medium text-gray-700 mb-2">详细描述</label>
                        <textarea id="feedback-description" rows="4" placeholder="请详细描述遇到的问题或您的建议..."
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none resize-none"></textarea>
                        <p class="text-xs text-gray-500 mt-1">建议包含：问题现象、操作步骤、期望结果等</p>
                    </div>

                    <!-- Screenshots -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            截图上传 <span class="text-xs text-gray-500">(可选)</span>
                        </label>
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-orange-400 transition-colors" onclick="uploadScreenshot()">
                            <i class="fas fa-cloud-upload-alt text-2xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500">点击上传截图</p>
                            <p class="text-xs text-gray-400 mt-1">支持 JPG、PNG 格式，最大 5MB</p>
                        </div>
                        <div id="uploaded-files" class="mt-2 space-y-2 hidden">
                            <!-- Uploaded files will be shown here -->
                        </div>
                    </div>

                    <!-- Contact Info -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <label class="block text-sm font-medium text-gray-700 mb-2">联系方式</label>
                        <input type="text" id="contact-info" placeholder="手机号或邮箱（便于我们回复您）" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none">
                    </div>
                </div>
            </div>

            <!-- Quick Feedback -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    快速反馈
                </h3>
                <div class="space-y-2">
                    <div onclick="quickFeedback('slow')" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-clock text-orange-600 mr-3"></i>
                            <span class="text-sm">系统运行速度慢</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div onclick="quickFeedback('interface')" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-desktop text-blue-600 mr-3"></i>
                            <span class="text-sm">界面设计不够友好</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div onclick="quickFeedback('function')" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-cog text-green-600 mr-3"></i>
                            <span class="text-sm">缺少某个功能</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                    <div onclick="quickFeedback('help')" class="bg-white rounded-lg border border-gray-200 p-3 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors">
                        <div class="flex items-center">
                            <i class="fas fa-question-circle text-purple-600 mr-3"></i>
                            <span class="text-sm">帮助文档不够详细</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                    </div>
                </div>
            </div>

            <!-- Recent Feedbacks -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                        最近反馈
                    </span>
                    <span onclick="viewMyFeedbacks()" class="text-orange-600 text-xs cursor-pointer hover:text-orange-700">
                        查看全部 <i class="fas fa-chevron-right text-xs"></i>
                    </span>
                </h3>
                <div class="space-y-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex-1">
                                <p class="text-sm font-medium">商品上架流程优化建议</p>
                                <p class="text-xs text-gray-500 mt-1">希望能简化商品发布流程，减少必填项...</p>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full ml-2">处理中</span>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <span>2025-01-08 14:32</span>
                            <span>功能建议</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex-1">
                                <p class="text-sm font-medium">数据报表导出问题</p>
                                <p class="text-xs text-gray-500 mt-1">导出Excel时部分数据显示异常...</p>
                            </div>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full ml-2">已解决</span>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <span>2025-01-05 09:15</span>
                            <span>Bug报告</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex-1">
                                <p class="text-sm font-medium">移动端体验优化</p>
                                <p class="text-xs text-gray-500 mt-1">手机端操作不够流畅，建议优化...</p>
                            </div>
                            <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full ml-2">待处理</span>
                        </div>
                        <div class="flex items-center justify-between text-xs text-gray-400">
                            <span>2025-01-03 16:45</span>
                            <span>使用体验</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="submitFeedback()" class="flex-1 bg-orange-600 text-white font-medium py-2.5 rounded-lg hover:bg-orange-700 transition-colors">
                    <i class="fas fa-paper-plane mr-2"></i>提交反馈
                </button>
                <button onclick="saveDraft()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-save"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        let selectedFeedbackType = '';
        let selectedPriority = 'medium';

        // Select feedback type
        function selectFeedbackType(type) {
            selectedFeedbackType = type;
            
            // Remove previous selection
            document.querySelectorAll('.feedback-type').forEach(el => {
                el.classList.remove('border-orange-500', 'bg-orange-50');
                el.classList.add('border-gray-200');
            });
            
            // Add selection to clicked element
            event.currentTarget.classList.remove('border-gray-200');
            event.currentTarget.classList.add('border-orange-500', 'bg-orange-50');
            
            const typeNames = {
                'bug': 'Bug报告',
                'feature': '功能建议',
                'experience': '使用体验',
                'other': '其他建议'
            };
            
            showToast(`已选择：${typeNames[type]}`);
        }

        // Select priority
        function selectPriority(priority) {
            selectedPriority = priority;
            
            // Remove previous selection
            document.querySelectorAll('.priority-btn').forEach(btn => {
                btn.classList.remove('bg-orange-500', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-700');
            });
            
            // Add selection to clicked button
            event.currentTarget.classList.remove('bg-gray-100', 'text-gray-700');
            event.currentTarget.classList.add('bg-orange-500', 'text-white');
        }

        // Upload screenshot
        function uploadScreenshot() {
            alert('上传截图\n\n支持格式：JPG、PNG\n最大文件：5MB\n\n截图有助于我们更好地理解问题');
            
            // Simulate file upload
            setTimeout(() => {
                const uploadedFiles = document.getElementById('uploaded-files');
                uploadedFiles.classList.remove('hidden');
                uploadedFiles.innerHTML = `
                    <div class="flex items-center justify-between bg-gray-50 rounded-lg p-2">
                        <div class="flex items-center">
                            <i class="fas fa-image text-blue-600 mr-2"></i>
                            <span class="text-sm">screenshot_001.png</span>
                        </div>
                        <button onclick="removeFile(this)" class="text-red-600 hover:text-red-700">
                            <i class="fas fa-times text-xs"></i>
                        </button>
                    </div>
                `;
                showToast('截图上传成功');
            }, 1000);
        }

        // Remove uploaded file
        function removeFile(button) {
            button.parentElement.remove();
            const uploadedFiles = document.getElementById('uploaded-files');
            if (uploadedFiles.children.length === 0) {
                uploadedFiles.classList.add('hidden');
            }
        }

        // Quick feedback
        function quickFeedback(type) {
            const feedbackTexts = {
                'slow': '系统运行速度较慢，影响工作效率',
                'interface': '界面设计需要优化，提升用户体验',
                'function': '希望增加某些功能来提高工作效率',
                'help': '帮助文档需要更详细的说明和示例'
            };

            document.getElementById('feedback-description').value = feedbackTexts[type];
            showToast('已填入快速反馈内容');
        }

        // Submit feedback
        function submitFeedback() {
            const title = document.getElementById('feedback-title').value.trim();
            const description = document.getElementById('feedback-description').value.trim();
            const contact = document.getElementById('contact-info').value.trim();

            if (!selectedFeedbackType) {
                showToast('请选择反馈类型');
                return;
            }

            if (!title) {
                showToast('请填写反馈标题');
                return;
            }

            if (!description) {
                showToast('请填写详细描述');
                return;
            }

            if (confirm('确认提交反馈？\n\n我们会认真处理您的每一条反馈，并尽快回复。')) {
                showToast('正在提交反馈...');
                
                setTimeout(() => {
                    showToast('反馈提交成功！感谢您的宝贵意见');
                    
                    // Clear form
                    document.getElementById('feedback-title').value = '';
                    document.getElementById('feedback-description').value = '';
                    document.getElementById('contact-info').value = '';
                    
                    // Reset selections
                    document.querySelectorAll('.feedback-type').forEach(el => {
                        el.classList.remove('border-orange-500', 'bg-orange-50');
                        el.classList.add('border-gray-200');
                    });
                    
                    selectedFeedbackType = '';
                    
                    setTimeout(() => {
                        if (confirm('查看反馈处理进度？')) {
                            viewMyFeedbacks();
                        }
                    }, 2000);
                }, 1500);
            }
        }

        // Save draft
        function saveDraft() {
            showToast('草稿已保存');
        }

        // View my feedbacks
        function viewMyFeedbacks() {
            window.location.href = 'b2b-my-feedbacks.html';
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            // Set default priority
            selectPriority('medium');
            showToast('意见反馈页面已加载');
        });
    </script>
</body>
</html>